<template>
	<view style="padding-bottom: 30upx;">
		<view class="toplogo">
			<image src="https://daiyue.gzzhenyi.net/static/index/logo.png" mode="widthFix"></image>
		</view>
		<view class="box">
			<view class="searchbox">
				<view class="adress" @tap="navTo('/long/setCity/setCity')" v-if="shortname">
					<image class="adimg" src="https://daiyue.gzzhenyi.net/static/index/address.png" mode="widthFix">
					</image>
					<text>{{ user.location }}</text>
				</view>
				<van-search class="search" shape="round" placeholder="请输入搜索关键词" @tap="navTo('/long/search/search')" />
				<!-- <view class="search-right">
					<image class="search-right-img" src="https://daiyue.gzzhenyi.net/static/index/yuans.png"
						mode="widthFix"></image>
					<button class="search-right-text" type="default" plain="true" open-type="contact">
						联系客服
					</button>
					<view></view>
				</view> -->

			</view>
			<view class="content">
				<swiper class="swiper" circular :indicator-dots="swiperInfo.dots" :autoplay="swiperInfo.autoplay">
					<swiper-item v-for="item in swiperList" :key="item.id" @click="swiperTo(item)">
						<image :src="baseUrl + item.show_img" mode="widthFix"></image>
						<!-- <image :src="item.show_img" mode="widthFix"></image> -->
					</swiper-item>
					<van-loading style="display: flex;margin: 115rpx auto; justify-content: center; width: 100%;"
						size="24px" v-if="!swiperList.length">加载中...</van-loading>
				</swiper>
				<view class="card">
					<view class="cardtit" @click="navTo(`/long/medicalProduct/medicalProduct?main_type=1`)">
						<image class="timg" src="https://daiyue.gzzhenyi.net/static/index/jyyl.png"></image>
						<text class="tit">家用医疗产品</text>
						<text class="chakan">查看更多</text>
						<image class="right" src="https://daiyue.gzzhenyi.net/static/index/right.png"></image>
					</view>
					<view class="jyitembox">
						<view class="item" v-for="item in normal.slice(0, 3)"
							@tap="navTo(`/long/productDetail/productDetail?id=${item.id}`)">
							<view class="jyimg">
								<image :src="baseUrl + item.image" mode="heightFix"></image>
								<view>热卖</view>
							</view>
							<text class="t1">{{ item.title }}</text>
							<text class="t2" v-if="item.vip_price > 0">会员价:￥{{ item.vip_price }}</text>
							<text v-else class="t2">验证后可查看价格</text>
							<view class="priceboxFlex">
								<view class="price" v-if="item.market_price > 0">￥{{ item.market_price }}</view>
								<view class="t3">已售{{ item.sales }}份</view>
							</view>
						</view>
						<van-loading style="display: flex;margin: 0 auto;" size="24px"
							v-if="!business.length">加载中...</van-loading>
					</view>
				</view>
				<view class="card">
					<view class="cardtit" @click="navTo(`/long/medicalProduct/medicalProduct?main_type=3`)">
						<image class="timg" src="https://daiyue.gzzhenyi.net/static/index/me.png"></image>
						<text class="tit">孕婴热门产品</text>
						<text class="chakan">查看更多</text>
						<image class="right" src="https://daiyue.gzzhenyi.net/static/index/right.png"></image>
					</view>
					<view class="jyitembox">
						<view class="item" v-for="item in business.slice(0, 3)"
							@tap="navTo(`/long/productDetail/productDetail?id=${item.id}&main_typ=${item.main_type}`)">
							<view class="jyimg-box">
								<image :src="baseUrl + item.image" mode="aspectFill"></image>
								<view>热卖</view>
							</view>
							<text class="t1">{{ item.title }}</text>
							<text class="t4" v-if="item.market_price > 0">¥{{ item.market_price }}</text>
							<text class="t2" v-if="item.vip_price > 0">会员价:￥{{ item.vip_price }}</text>
							<text v-else class="t2" style="margin-top: 10rpx;">验证后可查看价格</text>
						</view>
						<van-loading style="display: flex;margin: 0 auto;" size="24px"
							v-if="!business.length">加载中...</van-loading>

					</view>
				</view>
				<view class="card">
					<view class="cardtit">
						<image class="timg" src="https://daiyue.gzzhenyi.net/static/index/yyyl.png"></image>
						<text class="tit">医用医疗产品</text>
						<navigator url="/subCure/medicalList/medicalList" open-type="navigate"
							hover-class="navigator-hover">
							<text class="chakan">查看更多</text>
						</navigator>
						<image class="right" src="https://daiyue.gzzhenyi.net/static/index/right.png"></image>
					</view>
					<view class="yyitembox">
						<view class="item" v-for="item in medical.slice(0, 4)"
							@click="navTo(`/subCure/particulars/particulars?id=${item.id}`)">
							<!-- <image :src="item.imgUrl" mode="heightFix"></image> -->
							<view class="jyimg">
								<image :src="baseUrl + item.image" mode="aspectFit"></image>
							</view>
							<text>{{ item.title }}</text>
						</view>
						<van-loading style="display: flex;margin: 0 auto;" size="24px"
							v-if="!normal.length">加载中...</van-loading>
					</view>
				</view>
				<!-- <view class="dianbox">
					<view class="left" @tap="swiperTo()">
						<view class="ltext">
							<view class="dian">
								<view class="dianm">孕婴店</view>
								<view class="huodong">限时抢购</view>
							</view>
							<view class="jinru">点击进入<van-icon name="arrow" /></view>
						</view>
						<image class="bgimg" src="https://daiyue.gzzhenyi.net/static/index/xianshi.png" mode="widthFix">
						</image>
						<image class="pcimg" src="https://daiyue.gzzhenyi.net/static/index/yec.png" mode="widthFix">
						</image>
					</view>
					<view class="right" @tap="swiperTo()">
						<view class="rtext">
							<view class="dian">
								<view class="dianm">医疗器械店</view>
								<view class="huodong">最近热门</view>
							</view>
							<view class="jinru">点击进入<van-icon name="arrow" /></view>
						</view>
						<image class="bgimg" src="https://daiyue.gzzhenyi.net/static/index/zuijin.png" mode="widthFix">
						</image>
						<image class="pcimg" src="https://daiyue.gzzhenyi.net/static/index/yec.png" mode="widthFix">
						</image>
					</view>
				</view> -->
				<view class="menzhen">
					<view>
						<view class="mtext" @tap="tabTo('/pages/store/store?id=1&shop_type=2')">
							<view>
								<view class="t1">医疗器械店</view>
								<view class="t3">点击进入<van-icon name="arrow" /></view>
							</view>
							<image class="mimg" style="width: 124rpx;"
								src="https://daiyue.gzzhenyi.net/static/index/jy2.png" mode="widthFix">
							</image>
							<image class="bgimg" src="https://daiyue.gzzhenyi.net/static/index/bg1.png"
								mode="widthFix" />
						</view>
						<view class="mtext" @tap="tabTo('/pages/store/store?id=2&shop_type=3')">
							<view>
								<view class="t1">孕婴店</view>
								<view class="t3">点击进入<van-icon name="arrow" /></view>
								<!-- <image class="mimg" src="https://daiyue.gzzhenyi.net/static/index/m1.png" mode="widthFix">
							</image> -->
							</view>
							<image class="mimg" style="height: 139upx;"
								src="https://daiyue.gzzhenyi.net/static/index/yec.png" mode="heightFix">
							</image>
							<image class="bgimg" src="https://daiyue.gzzhenyi.net/static/index/bg2.png"
								mode="widthFix" />
						</view>
					</view>
					<view class="mright">
						<view class="ritem" @click="navTo('/subCure/outpatient/outpatient')">
							<image src="https://daiyue.gzzhenyi.net/static/index/m1.png"></image>
							<view class="item">
								<text class="t1">社区门诊</text>
							</view>
						</view>
						<view class="ritem" @tap="navTo('/subCure/leaseList/leaseList?main_type=4')">
							<image src="https://daiyue.gzzhenyi.net/static/index/m2.png"></image>
							<view class="item">
								<text class="t1">产品租赁或代购</text>
								<text class="t2">电话:400-6589-018</text>
							</view>
						</view>
						<view class="ritem" @tap="navTo('/subCure/buying/buying')">
							<image src="https://daiyue.gzzhenyi.net/static/index/m3.png"></image>
							<view class="item">
								<text class="t1">医疗设备代购</text>
								<text class="t2">400-6589-018</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="custom-button" type="default" plain="true" open-type="contact">
				<image src="/static/index/contact.png" mode="widthFix"></image>
			</button>
		</view>
		<privacy ref="privacyComponent" position="center"></privacy>
		<van-popup round :show="show" @close="onClose">
			<view   class="hotGood" style="position: relative;width: 400rpx;height: 400rpx;">
				<swiper style="width: 400rpx;height: 400rpx;" v-for="(item,i) in htmlList " :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item style="width: 400rpx;height: 400rpx;">
						<view style="width: 400rpx;height: 400rpx;"  class="swiper-item">
							<!-- <image v-if="showImg" @click="toDetils(item)"   style="width: 400rpx;height: 400rpx;" src="../../static/index/mor.png" mode=""></image> -->
							<image :lazy-load="true" @click="toDetils(item)" style="width: 400rpx;height: 400rpx;" :src=" baseUrl + item.image" mode=""></image>
						</view>
					</swiper-item>

				</swiper>
				<!-- <view class="smollBox">
					<button class="btn" type="default" plain="true" open-type="contact">
						联系客服
					</button>
				</view> -->
			</view>
		</van-popup>
		<van-dialog id="van-dialog" />
		<image @tap.stop="onClose" v-if="show"
			style="width: 60rpx;height: 60rpx;position: absolute;z-index: 999;bottom: 192rpx;left: 345rpx;"
			src="https://daiyue.gzzhenyi.net/static/image/store/colse@4x.png" mode="aspectFit"></image>
	</view>
</template>

<script>
	import {
		getHomeInit,
		getHomeBanner,
		getHomeGoods,
		getInfo,
		getWxLogin,
		getUserInfo
	} from "@/api/api"
	import privacy from '@/components/priacy/priacy.vue'
	import baseUrl from "@/api/baseUrl.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			privacy
		},

		data() {
			return {
				showImg:true,
				htmlList: [],
				// 是否显示招商广告
				show: true,
				shortname: "",
				// 输入框的值
				searchValue: "",
				// api请求根地址
				baseUrl,
				swiperInfo: {
					// 指示器
					dots: true,
					// 自动播放
					autoplay: true
				},
				// 轮播图列表
				swiperList: [],
				business: [],
				medical: [],
				normal: [],
				jyList: [],
				yyList: [],

			}
		},
		computed: {
			...mapState(["user"])
		},
		onLoad() {
			console.log(this.user)

			if (!this.user.token) {
				/* Dialog.confirm({
					title: '标题',
					message: '你还未登录，请先登录',
				}).then(() => {
					// on confirm
					this.toLogin()
				}).catch(() => {
					// on cancel
				}); */
				uni.showModal({
					title: '提示',
					content: '你还未登录，请先登录',
					showCancel: false, // 不显示取消按钮
					success: (res) => {
						if (res.confirm) {
							// uni.switchTab({ url: '/pages/user/user' })
							this.toLogin()
							console.log('用户点击确定');
						}
					}
				});
			}
			this.toInit()
			this.toBanner()
			this.toGoods()
			if (this.$daiyueapp.isnum == 1) {
				this.show = true
				this.getMsg()
			}

		},
		onUnload() {
			this.$daiyueapp.isnum = 2
		},
		methods: {
			...mapMutations('user', ['changeAvatar', 'changeNickName', 'changeMobile', 'changeToken', 'changeOpenid']),
			getUser() {
				getUserInfo().then(res => {
					if (res.code == 1) {
						this.item = res.data
					}
				})
			},
			// 登录
			toLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						getWxLogin({
							code: res.code
						}).then(resUser => {
							console.log(resUser)
							if (resUser.code == 1) {
								console.log(resUser)
								this.changeToken(resUser.data.userinfo.token)
								this.changeAvatar(this.baseUrl + resUser.data.userinfo.avatar)
								this.changeNickName(resUser.data.userinfo.nickname)
								this.changeMobile(resUser.data.userinfo.mobile)
								this.changeOpenid(resUser.data.userinfo.openid)
								this.getUser();
								console.log(this.user.token)
							}
							uni.showToast({
								title: resUser.msg,
								icon: 'none'
							})
						})

						// uni.navigateTo({
						// 	url: '/pages/login/login'
						// })
					}
				})
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
			},
			showSwitch(){
				this.showImg = false
			},
			
			toDetils(item) {
				uni.navigateTo({
					url: `/pages/guangao/guangao?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},

			onClose() {
				this.show = false
			},

			getMsg() {
				getInfo({}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.htmlList = res.data
					}
				})
			},

			...mapMutations('user', ["changeLocation"]),
			// 链接跳转
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// tab栏跳转
			tabTo(url) {
				uni.switchTab({
					url
				})
			},
			swiperTo(item) {
				console.log(item)
				if (item.target_url) {
					if (item.target_url.indexOf('store') !== -1) {
						uni.switchTab({
							url: item.target_url
						})
					} else {
						uni.navigateTo({
							url: item.target_url
						})
					}
				} else {
					uni.navigateTo({
						url: '/long/richText/richText?id=' + item.id
					})
				}

			},
			// 基础信息
			toInit() {
				getHomeInit({
					version: "1.0.0"
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						// this.shortname = res.data.citydata.shortname
						// this.changeLocation(res.data.citydata.shortname)
						const shortname = res.data.citydata.shortname;
						if (!this.changeLocation) {
							this.changeLocation(shortname);
						}
						this.shortname = this.user.location;
					}
				})
			},
			// 轮播图
			toBanner() {
				getHomeBanner({}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.swiperList = res.data
					}
				})
			},
			// 商品列表
			toGoods() {
				getHomeGoods({}).then(res => {
					if (res.code == 1) {
						this.normal = res.data.normal
						this.medical = res.data.medical
						this.business = res.data.business
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.hotGood {
		padding: 24rpx;

		.msg {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.buy {
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 19.8px;
				letter-spacing: 0px;
				color: #5C5C5C;
			}

			.price {


				.orign {
					font-family: PingFang SC;

					font-weight: normal;
					line-height: 27rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;
					color: #FF6200;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;

					.big_origin {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.gray {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;

					color: #A2A2A2;
				}
			}
		}

		.title {
			margin-top: 20rpx;
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: normal;
			line-height: normal;
			text-align: justify;
			letter-spacing: 0px;
			color: #333333;
			padding: 0 20rpx;
		}

		.smollBox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 24rpx 0;

			.btn {
				width: 440rpx;
				height: 70rpx;
				border-radius: 35rpx;
				background: #FF6200;
				font-size: 26rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0;
				border: none;
			}
		}
	}


	.toplogo {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 11%;
		background-color: #fff;
		z-index: 99;

		image {
			margin-top: 14.5%;
			width: 153rpx;
			// height: 41rpx;
		}
	}

	.box {
		margin-top: 20%;
		padding-bottom: 30upx;

		.searchbox {
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;

			.adress {
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 10rpx;
				font-size: 26rpx;

				.adimg {
					width: 22rpx;
					height: 26rpx !important;
					object-fit: cover;
				}
			}

			.search {
				flex: 1;
			}

			.search-right {
				width: 207rpx;
				height: 68rpx;
				// object-fit: cover;
				background: #F6F6F6;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 10rpx;
				margin-right: 30rpx;

				.search-right-img {
					width: 67rpx;
					// height: 67rpx;
				}

				.search-right-text {
					font-size: 24rpx;
					color: #333333;
					border-radius: 0;
					border: 0;
					width: 120upx;
					padding: 0;

				}
			}
		}

		.content {
			padding: 0 30rpx;

			.swiper {
				width: 100%;
				height: 296rpx;
				border-radius: 8rpx;

				image {
					width: 100%;
				}
			}

			.card {
				width: 690rpx;
				// height: 377rpx;
				border-radius: 16rpx;
				box-shadow: 0px 2rpx 8rpx 0px rgba(205, 205, 205, 0.5);
				margin-top: 24rpx;

				.cardtit {
					display: flex;
					align-items: center;
					column-gap: 10rpx;
					padding: 20rpx;
					box-sizing: border-box;
					overflow: hidden;

					.timg {
						width: 40rpx;
						height: 40rpx;
					}

					.tit {
						letter-spacing: 0.36rpx;
						font-size: 30rpx;
						color: #212121;
						flex: 1;
					}

					.chakan {
						font-size: 22rpx;
						letter-spacing: 0.26rpx;
						color: #999999;
					}

					.right {
						width: 7rpx;
						height: 14rpx;
					}
				}

				.jyitembox {
					/* display: flex;
					justify-content: space-between; */
					padding: 10rpx 20rpx 30rpx 20rpx;
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap: 20rpx;
					width: 100%;
					box-sizing: border-box;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;
						overflow: hidden;

						.jyimg-box {
							width: 202rpx;
							height: 202rpx;
							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 8upx;
							margin-bottom: 8rpx;
							
							image {
								width: 202rpx;
								height: 202rpx;
								border-radius: 8upx;
							}

							view {
								position: absolute;
								left: 0;
								bottom: 0;
								// transform: rotate(180deg);
								border-radius: 0 15rpx 0 6rpx;
								background: linear-gradient(241deg, #FF8E00 -7%, #FF5500 105%);
								// background-color: #359BEF;
								width: 52rpx;
								height: 27rpx;
								line-height: 27rpx;
								font-size: 17rpx;
								color: #FFF;
								text-align: center;
							}
						}

						.jyimg {
							width: 100%;
							height: 147rpx;
							border-radius: 8rpx;
							background: #FFFFFF;
							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-bottom: 8rpx;

							image {
								width: auto;
								height: 100rpx;
							}

							view {
								position: absolute;
								left: 0;
								bottom: 0;
								// transform: rotate(180deg);
								border-radius: 0 15rpx 0 6rpx;
								// background: linear-gradient(241deg, #FF8E00 -7%, #FF5500 105%);
								background-color: #359BEF;
								width: 52rpx;
								height: 27rpx;
								line-height: 27rpx;
								font-size: 17rpx;
								color: #FFF;
								text-align: center;
							}
						}

						.t1 {
							color: #333333;
							font-size: 26rpx;
							width: 100%;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							margin-bottom: 12rpx;
						}

						.t2 {
							color: #FF6200;
							font-size: 22rpx;
							margin-bottom: 8rpx;
						}

						.t3 {
							color: #CCCCCC;
							font-size: 20rpx;
						}

						.t4 {
							color: #333333;
							font-size: 22rpx;
							margin-bottom: 8rpx;
						}

						.priceboxFlex {
							display: flex;
							justify-content: space-between;

							.price {
								font-size: 24upx;
							}
						}
					}
				}

				.yyitembox {
					// display: flex;
					// justify-content: space-between;
					padding: 10rpx 20rpx 30rpx 20rpx;
					box-sizing: border-box;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 20rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						row-gap: 16rpx;
						padding: 0 10rpx;
						overflow: hidden;
						box-sizing: border-box;
						width: 100%;

						// image {
						// 	height: 120rpx;
						// 	width: auto;
						// }
						.jyimg {
							width: 138rpx;
							height: 118rpx;
							border-radius: 8rpx;
							background: #FFFFFF;
							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100%;
								height: 100rpx;
							}
						}

						text {
							font-size: 22rpx;
							color: #333333;
							width: 100%;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}
			}

			.dianbox {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;

				.left,
				.right {
					position: relative;
					display: flex;
					width: 50%;
					box-sizing: border-box;

					.bgimg {
						width: 100%;
					}

					.pcimg {
						position: absolute;
						top: 38%;
						right: 20%;
						width: 128rpx;
					}

					.ltext {
						position: absolute;
						top: 38rpx;
						left: 28rpx;

						.dian {
							display: flex;
							column-gap: 10rpx;

							.dianm {
								color: #EB5E00;
								font-size: 30rpx;
							}

							.huodong {
								font-size: 22rpx;
								color: #FFFFFF;
								width: 119rpx;
								height: 41rpx;
								line-height: 41rpx;
								padding-left: 12rpx;
								border-radius: 6rpx 6rpx 100rpx 6rpx;
								background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
							}
						}

						.jinru {
							font-size: 22rpx;
							color: #EB5E00;
							margin-top: 17rpx;
						}
					}

					.rtext {
						position: absolute;
						top: 38rpx;
						left: 28rpx;

						.dian {
							display: flex;
							column-gap: 10rpx;

							.dianm {
								color: #3F5096;
								font-size: 30rpx;
							}

							.huodong {
								font-size: 22rpx;
								color: #FFFFFF;
								width: 119rpx;
								height: 41rpx;
								line-height: 41rpx;
								padding-left: 12rpx;
								border-radius: 6rpx 6rpx 100rpx 6rpx;
								background: linear-gradient(107deg, #7388C7 -10%, #3F5096 100%);
							}
						}

						.jinru {
							font-size: 22rpx;
							color: #3F5096;
							margin-top: 17rpx;
						}
					}
				}
			}

			.menzhen {
				background: url('https://daiyue.gzzhenyi.net/static/index/bg.png');
				background-size: 100%;
				background-repeat: no-repeat;
				width: 100%;
				height: 414rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 26rpx 20rpx;
				box-sizing: border-box;
				column-gap: 20rpx;
				margin-top: 30rpx;

				.mtext {
					width: 315rpx;
					height: 175rpx;
					// display: flex;
					// flex-direction: column;
					// display: flex;
					text-align: left;
					grid-column: 20rpx;
					color: #fff;
					border-radius: 16rpx;
					background: rgba(255, 255, 255, 0.8);
					// border: 6rpx solid rgba(255, 255, 255, 0.5012);
					backdrop-filter: blur(13.6rpx);
					padding: 20rpx;
					box-sizing: border-box;
					margin: 15upx 0;
					position: relative;

					.t1 {
						font-size: 30rpx;
						color: #0E6F84;
					}


					.t3 {
						font-size: 20upx;
						color: #0E6F84;
						margin-top: 11upx;
						// text-align: center;

					}

					.mimg {
						align-self: flex-end;
						position: absolute;
						width: 136rpx;
						height: 130rpx;
						bottom: 10%;
						right: 20%;
					}

					.bgimg {
						align-self: flex-end;
						position: absolute;
						width: 100rpx;
						// height: 130rpx;
						bottom: 10%;
						right: 0;
					}

					// .mimg {
					// 	align-self: flex-end;
					// 	position: absolute;
					// 	width: 136rpx;
					// 	height: 130rpx;
					// 	bottom: 10%;
					// }
				}

				.mright {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 48%;
					row-gap: 15rpx;
					height: 100%;

					.ritem {
						display: flex;
						grid-column: 20rpx;
						// justify-content: space-around;
						align-items: center;
						height: 50%;
						background: rgba(255, 255, 255, 0.8);
						// border: 6rpx solid rgba(255, 255, 255, 0.5012);
						backdrop-filter: blur(13.6rpx);
						border-radius: 16rpx;
						padding: 10rpx 0;

						image {
							width: 82rpx;
							height: 82rpx;
							object-fit: cover;
							margin: 0 10rpx;
						}

						.item {
							display: flex;
							flex-direction: column;
							row-gap: 15rpx;

							.t1 {
								color: #0E6F84;
								font-size: 26rpx;
								text-align: left;
							}

							.t2 {
								font-size: 20rpx;
								color: #0E6F84;
							}
						}
					}
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		right: 2%;

		.custom-button {
			border: none !important;
			padding: 0 !important;
			line-height: normal;

			image {
				width: 117rpx;
				height: 117rpx;
				object-fit: cover;
			}
		}
	}
</style>